Семантические элементы HTML5
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <header>
Категории контента: потоковое содержимое.Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
<header>
<h2>Site description</h2>
<nav>
<ul>
<li><a href="">About</a>
<li><a href="">Forum</a>
<li><a href="">Download</a>
</ul>
</nav>
</header> Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
2. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое.Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
<nav>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav> В качестве элементов панели навигации можно использовать не только элементы списков:
<nav>
<p><a href="">...</a></p>
<p><a href="">...</a></p>
</nav> Также можно добавлять заголовки внутрь элемента:
<nav>
<h3>...</h3>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav> 3. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое.Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article>
<header>
<h3>...</h3>
</header>
<p>...</p>
<footer>
Опубликовано в категории<a href="">Музыка</a>.
<a href="">0 комментариев</a>
</footer>
</article> 4. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое.Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article>
<h2>...</h2>
<section>
<h3>...</h3>
<p>...</p>
</section>
<section>
<h3>...</h3>
<p>...</p>
</section>
<p>...</p>
</article> <article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section>
<h2>Заметки о природе</h2>
<article>
<h3>...</h3>
<p>...</p>
</article>
<article>
<h3>...</h3>
<p>...</p>
</article>
</section>
<section>
<h2>Исторические заметки</h2>
<article>
<h3>...</h3>
<p>...</p>
</article>
<article>
<h3>...</h3>
<p>...</p>
</article>
</section> 5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое.Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside>
<h3>...</h3>
<p>...</p>
</aside> <aside>
<h3>...</h3>
<p>...</p>
<blockquote>
<p>...<cite>...</cite>...</p>
<p>...</p>
</blockquote>
</aside> 6. Элемент <footer>
Категории контента: потоковое содержимое.Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
<footer>
<address>...</address>
<small>@2014...</small>
</footer> 7. Элемент <address>
Категории контента: потоковое содержимое.Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
<body>
<header>
<h2>Пудель</h2>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О породе</a></li>
<li><a href="health.html">Здоровье</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h3>О породе</h3>
<nav>
<ul>
<li><a href="#basic">Разновидности</a></li>
<li><a href="#app">Внешний вид</a></li>
<li><a href="#temp">Характер</a></li>
</ul>
</nav>
</header>
<section>
<h4>Разновидности</h4>
<p>...</p>
</section>
<section>
<h4>Внешний вид</h4>
<p>...</p>
</section>
<section>
<h4>Характер</h4>
<p>...</p>
</section>
<footer>
<a href="#basic">Разновидности</a>
<a href="#app">Внешний вид</a>
<a href="#temp">Характер</a>
</footer>
</section>
</main>
<footer>
<small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>
</footer>
</body> 9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
<figure>
<img src="picture.jpg" alt="Осень">
<figcaption>Осенний лес</figcaption>
</figure> Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em; 10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
11. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time> Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time> 12. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:— один и более текстовых узлов или элементов <rb>;— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
html5book.ru
Изучаем html блоки тег div - верстка, примеры, видео
Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.
У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?
В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в
Приступим к изучению.
HTML div блоки и верстка
Чтобы не захламлять и замусоривать ваш мозг, вкратце лишь скажу, что раньше все веб дизайнеры и разработчики при создании страниц и сайтов использовали табличную верстку, где каждая ячейка представляла из себя определенный элемент. Примерно это выглядело вот так:
Здесь располагался логотип Тут телефон Здесь был сайдбарС пунктами меню Раздел меню 1 Раздел меню 2 Раздел меню 3
Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.
Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.
Вот так теперь можно изобразить упрощенно модель использования div html блоков.
Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.
Примеры использования тегов div
Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++
Итак, давайте поясню. У нас есть конструкция
<!DOCTYPE html> она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.
Далее открывается большой «родительский» контейнер
<html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега
<head> , который тоже парный и в нем содержится служебная информация о кодировке
<meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.
Следующим идет тег
<body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».
И вот, наконец, пошли наши контейнеры div.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.
Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.
Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету
id имеет больше привилегий, чем
class .
Это я поясню в видео шпаргалке ниже.
У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой
.selector
Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.
Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.
Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:
Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример использования div тегов</title>
<style>
.header {
width:600px;
height:120px;
border:1px solid black;
}
.sidebar {
width:200px;
height:300px;
border:1px solid black;
float:left;
}
.content {
width:370px;
height:300px;
border:1px solid black;
margin-left:230px;
}
.footer {
width:600px;
height:130px;
border:1px solid black;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример использования div тегов</title>
<style>
.header {
width:600px;
height:120px;
border:1px solid black;
}
.sidebar {
width:200px;
height:300px;
border:1px solid black;
float:left;
}
.content {
width:370px;
height:300px;
border:1px solid black;
margin-left:230px;
}
.footer {
width:600px;
height:130px;
border:1px solid black;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
У блока с контентом .content я добавил отступ от левого края
margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.
Чтобы увидеть границы наших div блоков я применил атрибут
border и задал значение
1px, solid — сплошная линия и выбрал цвет черный black.
Также вы наверняка обратили внимание, что у селектора
.sidebar я добавил атрибут
float:left; Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:
Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!
smarticle.ru
Классы и ID CSS: Что использовать?
В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.
В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.
Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.
Как используется CSS-селектор ID
Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:
<div>
<font>
<font>Это заголовок нашей веб-страницы.
</font>
</font>
</div> В файле CSS можно применить стили к этому элементу div:
#header { width: 100%; height: 80px; background: blue } Обратите внимание на использование # (хэша) перед именем идентификатора.
Как используется селектор CSS класса
Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:
<p>
<font>
<font>Это наш первый пункт.</font>
</font>
</p>
<p>
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p>
<font>
<font>Это наш третий абзац.</font>
</font>
</p> В файле CSS можно применить стили к этим абзацам следующим образом:
.content { margin: 20px 0; line-height: 24px; font-size: 15px } Обратите внимание на использование точки перед именем класса.
В чем разница между CSS-классами и ID
Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.
Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.
Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:
<div>
<a>
<font>
<font>Ссылка 1 </font>
</font></a>
<a>
<font>
<font>Ссылка 2 </font>
</font>
</a>
<a>
<font>
<font>Ссылка 3 </font>
</font>
</a>
<a>
<font>
<font>Ссылка 4</font>
</font>
</a>
</div>
<div>
<p>
<font>
<font>Это наш первый пункт.</font>
</font><
/p>
<p> </p>
<p>
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p> </p>
<p>
<font>
<font>Это наш третий абзац.</font>
</font>
</p>
</div> В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.
В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.
Назначим стили для этих элементов:
#container { width: 1080px; margin: 0 auto; background: #eee }
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
#content { padding: 20px }
.text { font-size: 15px } Когда использовать в CSS класс, а когда ID
ID используется для отдельных элементов, которые присутствуют на странице только в одном месте. Например, заголовка, подвала или меню. Класс используется для одного или нескольких элементов, которые присутствуют на странице: параграфов, ссылок, кнопок, полей ввода. Также можно использовать класс для единичного элемента. Чтобы привыкнуть к этому различию, лучше завести привычку использовать классы для управления несколькими элементами одного типа.
Следует помнить, что HTML-элемент может иметь CSS класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:
<div>
<font>
<font>...</font>
</font>
</div>
<div>
<font>
<font>...</font>
</font></div> Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:
<p>
<font>
<font>Этот пункт не имеет границ.</font>
</font>
</p>
<p>
<font>
<font>Этот пункт имеет границы.</font>
</font>
</p> Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 } Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.
Перевод статьи «CSS Class vs ID Which One to Use» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Как перейти с div вёрстки на разметку HTML5? - html(5), css
Предлагаю небольшой обзор стандарта HTML5. Ну есть он, каковы отличия, что нового, чем лучше старого доброго html4?
По мере популяризации стандарта, многие задались вопросом, стоит ли переписывать код разметки действующего/создаваемого сайта под новый стандарт HTML5? Если да, то как?
Заведем здесь небольшой пример для того, чтобы было дальше нагляднее.
Итак, имеем примерно такой код документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="style.css" type="text/css"> <script src="script.js" type="text/javascript"></script> <title>Заголовок</title> </head> <body> <div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div> <p>Lorem ipsum</p> </div> <div> sidebar </div> <div> copyright </div> </body></html> Стандартный двух колоночный макет, с верхним меню в шапке сайта. Базовые теги стандарта html5:
<header> - элемент, который обозначает шапку сайта или какой-то секции. На странице может присутствовать сразу несколько элементов.
<footer> - элемент, обозначающий подвал страницы (нижней её части), также может являться нижней частью любой секции секции. На странице может присутствовать несколько таких элементов (например, подвал страницы с информацией о копирайте + элемент в каждой новости).
<nav> - элемент служит для обрамления любого меню сайта. Может располагаться (хотя и необязательно в блоке header).
<main> - элемент для отображения основного контента страницы сайта. Он НЕ должен содержать навигационные и вспомогательные блоки сайта, такие как меню, логотип, сайдбары и т.д.
<section> - используется для логического структурирования блоков информации на странице. Например, он может обрамлять списки новостей, статей, уроков и т.д.
<aside> - элемент, который используют для обозначения вспомогательных боковых колонок. Например, им обрамляются сайдбары.
<article> - элемент используется для логического выделения самостоятельной единицы информации. Например, внутрь тега может быть помещен, анонс статьи с заголовком, заметка, пост блога и.т.д.
Некоторые теги, которые могут использоваться по необходимости:
<audio>, <video> - теги для вставки аудио/видео материалов на сайт.
<time> - тег для вставки даты. Например, дата размещения статьи.
<canvas> - элемент используется для рисования двухмерных изображений с помощью скриптов (в частности Javascript). Графики на сайтах, диаграммы и т.д.
Элементы должны содержать открывающий/закрывающий теги. Вообще, это относится не только к элементам стандарта HTML5. Хотя современные браузеры и научились правильно ставить закрывающий тег, в случае отсутствия такового — правилом хорошего тона считается закрытие тегов (если речь идёт не об одиночных) самим разработчиком.
Теперь небольшая подготовительная часть, чтобы переход был минимально ощутим для старых браузеров:
Добавляем в секцию <head>:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Для понимания неизвестных блочных элементов брузером, в файл со стилями добавляем:
footer, nav, header, section, aside { display: block;} Теперь посмотрим, что получится, если переписать код нашего шаблона под стандарт HTML5:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet"> <script src="script.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> footer, nav, header, section, aside { display: block; } </style> <title>Document</title> </head> <body> <header> <nav> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </nav> </header> <main> <p>Lorem ipsum</p> </main> <aside> sidebar </aside> <footer> copyright </footer> </body></html> Как видим различия?
- Доктайп сократился и стал лаконичным. Теперь нет необходимости мучительно выбирать подходящий.
- Пропали атрибуты type="…", MIME-типы у тегов внутри.
- Все блоки div были заменены на семантические элементы разметки. Причем если селекторы в файле стилей не были привязаны к тегам (например, не "div.header", а ".header"), то стили без правок применятся к соответствующим элементам.
Нужно понимать, что переход на HTML5 это больше, чем просто перевод div-верстки на теги из нового стандарта.
Это оптимизация сайта под поисковики, под всю ту широкую линейку всевозможных современных устройств, с которых могут просматриваться сайты. Новые возможности по вставке медиа материалов, дополнительные стандартные возможности при работе с формами (многие из которых раньше достигались только через подключение скриптов).
Это лишь краткий список новшеств. Надеюсь, данный экскурс поможет Вам разобраться.
Вопросы, уточнения — оставляйте в комментариях.
hellohtml.ru
Сайт визитка - размечаем основные блоки и элементы в хейдере
На итоговый результат можно посмотреть, перейдя по ссылке ниже.
Посмотреть Demo
Как правило, все графические элементы, которые используются для оформления сайта, хранятся в отдельной папке с соответствующим названием. Не будем отступать от этого правила и мы. В папке synchronous/html создадим еще одну директорию и назовем ее images.
Откроем PSD (synchronous/PSD/home.psd). Нам нужно вырезать из макета логотип и сохранить его на прозрачном фоне.
Отключаем слой wraper.
Выделяем логотип (внимательно смотрим, что бы надпись под логотипом не попала в область выделения).
Копируем выделенный объект в буфер обмена. Создаем новый документ. Проверяем, что бы значение параметра Background Contents было Transparent (если требуется, выбираем из выпадающего списка нужное значение) и нажимаем кнопку OK.
Вставляем содержимое буфера обмена в созданный документ - изображение логотипа появится в рабочей области.
Сохраняем изображение в папке images проекта, с именем logo и с расширением png.
С необходимой графикой закончили - займемся html. Открываем index.html в Notepas++ (если он не открыт). Между тэгами <body> </body> напишем следующий код:
<body>
<div>
<header>
</header>
<div>
</div>
</div>
<footer>
</footer>
</body>
Мы разметили три основных части сайта - header, content и footer. Для хедера и подвала сайта были использованы специальные тэги, которые применяются в html 5 (header и footer). Всем блокам заданы классы (например,).
Сосредоточим свое внимание на блоке header. Его можно было бы разметить и с помощью div - результат был бы таким же, но мы будем придерживаться спецификации html 5. Внутри header разместим логотип и навигацию для сайта. Логотип, как правило, является ссылкой, ведущей на главную страницу. Это необязательное условие, но изобретать велосипед не будем. Внутри <header> </header> пишем следующее:
<header>
<a href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a>
</header>
Если сейчас обновить страницу (или открыть в браузере index.html, если он еще не открыт), то мы увидим картинку с названием компании и слоган. Оба элемента являются ссылкой.
Итак, как и положено строчным элементам, картинка с фразой выстроились в один ряд друг за другом. Текст приобрел синий цвет и стал подчеркнутым - так отмечаются по умолчанию ссылки в браузере. Результат ожидаемый - двигаемся дальше.
Еще один элемент, который должен быть размещен в хейдере - навигационное меню. В подавляющем большинстве случаев меню размечаются с помощью ненумерованных (неупорядоченных) списков. Вот как будет выглядеть код:
<ul>
<li><a href="#"></a>Главная</a></li>
<li><a href="#"></a>О компании</a></li>
<li><a href="#"></a>Новости</a></li>
<li><a href="#"></a>Контакты</a></li>
</ul>
По спецификации html 5 все навигационные ссылки обрамляются парным тегом nav. Так и сделаем, только еще присвоим элементу nav класс top_nav. С учетом вышесказанного, весь код главной страницы сайта будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Главная</title>
</head>
<body>
<div>
<header>
<a href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a>
<nav>
<ul>
<li><a href="#"></a>Главная</a></li>
<li><a href="#"></a>О компании</a></li>
<li><a href="#"></a>Новости</a></li>
<li><a href="#"></a>Контакты</a></li>
</ul>
</nav>
</header>
<div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Посмотрим, что покажет нам браузер:
Ну, что же, хоть вид и далек от того, что нарисовано в макете, но, скажу по секрету - мы все выполнили правильно. Что бы придать элементам нужное положение и презентабельный внешний вид, им следует назначить стилевые правила. В следующей статье наведем немного "красоты" - натянем фон и разместим элементы хедера там, где они и должны быть.
Автор: Super User
siteis.ru
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.
Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.
Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д. По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.
Можно, например, типичную запись:
<div><h2><a href="http://www.examplesite.com/">Самый сайт</a></h2></div>
переписать по-новому так:
<header><h2><a href="http://www.examplesite.com/">Самый сайт</a></h2></header>
И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.
Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:
header, footer, nav, article {display: block;}
Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.
nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).
section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.
article — служит для разбивки страницы на отдельные статьи.
Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня h2 на одной странице несколько раз, что ранее было недопустимо. Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:
<section><article><section></section><section></section></article><article><section></section><section></section></article></section>
hgroup — тэг призван группировать заголовки страницы в одну логическую единицу. Например, главный заголовок всей страницы h2 и описание к ней, оформленное тэгом h4. На странице в дальнейшем еще несколько раз могут использоваться тэги h4 для других целей. Чтобы логически отделить описание страницы от других тэгов h4, мы его объединяем с главным тэгом h2 в группу, которая и обозначается тэгом hgroup:
<hgroup><h2>Самый сайт</h2><h4>Здесь описание Самого сайта</h4></hgroup>
UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.
main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.
Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main. В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!
Тэг main не является структурным тэгом и никак не влияет на разметку страницы. Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности. И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:
main {display:block;}
Пример использования тэга main:
<body><header></header><main>Основное, уникальное содержимое страницы сайта.</main><aside></aside><footer></footer></body>
Тэг main был задуман для всевозможных программ-скринридеров, чтобы люди с плохим зрением могли знать, что на странице сайта является основным содержимым.
Из уникальности тэга main следует, что использовать его на сайте достаточно сложно. Ну, сами представьте себе такой сайт, где на каждой странице нужно выделить уникальную часть. Представили? Лично я вижу лишь простенький сайт-визитку на 5 – 6 страниц, где содержимое каждой страницы уникально и не повторяется нигде больше на сайте.
А взять, к примеру, любой блог на WordPress. Как выделить уникальное содержимое, если на главной страницы присутствуют анонсы статей, в архиве тоже есть выдержки? Какая уж тут уникальность! Разве что на статичных страницах типа «О сайте» или «Контакты».
Так что не все, что появляется нового в HTML5 на самом деле полезно, и не стоит это сразу же применять необдуманно.
Продолжение следует…
HTML5 ВведениеHTML5 первые шагиHTML5 новые тэги header, footer, nav, aside, section, article, hgroup, mainHTML5 новые тэги time, figure, video, audio, canvas
02.02.2012
Автор: Игорь Квенторwww.websovet.com
Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:
www.websovet.com
Шапка страницы | htmlbook.ru
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header>.
header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; } В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; } На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
<header> <div> <img src="images/header-title.png" alt="Как поймать льва в пустыне"> </div> </header> И стиль для элемента <header> и слоя header-bg.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; } В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
- Использовать формат PNG-24 при сохранении прозрачности.
- Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ } Выравнивание по центру делается через свойство text-align, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне"></a> Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
Пример 6.14. Шапка сайта
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как поймать льва в пустыне?</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* Градиент */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* Животные */ height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ } </style> </head> <body> <header> <div> <img src="images/header-title.png" alt="Как поймать льва в пустыне" > </div> </header> </body> </html>htmlbook.ru
Смотрите также
Семантические элементы HTML5
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <header>
Категории контента: потоковое содержимое.Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
<header> <h2>Site description</h2> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
2. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое.Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
<nav> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>В качестве элементов панели навигации можно использовать не только элементы списков:
<nav> <p><a href="">...</a></p> <p><a href="">...</a></p> </nav>Также можно добавлять заголовки внутрь элемента:
<nav> <h3>...</h3> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>3. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое.Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <header> <h3>...</h3> </header> <p>...</p> <footer> Опубликовано в категории<a href="">Музыка</a>. <a href="">0 комментариев</a> </footer> </article>4. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое.Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article><article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section> <h2>Заметки о природе</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section> <section> <h2>Исторические заметки</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section>5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое.Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside> <h3>...</h3> <p>...</p> </aside> <aside> <h3>...</h3> <p>...</p> <blockquote> <p>...<cite>...</cite>...</p> <p>...</p> </blockquote> </aside>6. Элемент <footer>
Категории контента: потоковое содержимое.Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
<footer> <address>...</address> <small>@2014...</small> </footer>7. Элемент <address>
Категории контента: потоковое содержимое.Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
<body> <header> <h2>Пудель</h2> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О породе</a></li> <li><a href="health.html">Здоровье</a></li> </ul> </nav> </header> <main> <section> <header> <h3>О породе</h3> <nav> <ul> <li><a href="#basic">Разновидности</a></li> <li><a href="#app">Внешний вид</a></li> <li><a href="#temp">Характер</a></li> </ul> </nav> </header> <section> <h4>Разновидности</h4> <p>...</p> </section> <section> <h4>Внешний вид</h4> <p>...</p> </section> <section> <h4>Характер</h4> <p>...</p> </section> <footer> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
<figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure>Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
11. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time>Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>12. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:— один и более текстовых узлов или элементов <rb>;— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
html5book.ru
Изучаем html блоки тег div - верстка, примеры, видео
Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.
У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?
В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в
Приступим к изучению.
HTML div блоки и верстка
Чтобы не захламлять и замусоривать ваш мозг, вкратце лишь скажу, что раньше все веб дизайнеры и разработчики при создании страниц и сайтов использовали табличную верстку, где каждая ячейка представляла из себя определенный элемент. Примерно это выглядело вот так:
| Здесь располагался логотип Тут телефон | |||
| Здесь был сайдбарС пунктами меню | Раздел меню 1 | Раздел меню 2 | Раздел меню 3 |
Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.
Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.
Вот так теперь можно изобразить упрощенно модель использования div html блоков.
Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.
Примеры использования тегов div
Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++
Итак, давайте поясню. У нас есть конструкция <!DOCTYPE html> она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.
Далее открывается большой «родительский» контейнер <html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега <head> , который тоже парный и в нем содержится служебная информация о кодировке <meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.
Следующим идет тег <body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».
И вот, наконец, пошли наши контейнеры div.
<div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div> |
Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.
Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.
Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету id имеет больше привилегий, чем class .
Это я поясню в видео шпаргалке ниже.
У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой .selector
Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.
Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.
Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:
Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример использования div тегов</title> <style> .header { width:600px; height:120px; border:1px solid black; } .sidebar { width:200px; height:300px; border:1px solid black; float:left; } .content { width:370px; height:300px; border:1px solid black; margin-left:230px; } .footer { width:600px; height:130px; border:1px solid black; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример использования div тегов</title> <style> .header { width:600px; height:120px; border:1px solid black; } .sidebar { width:200px; height:300px; border:1px solid black; float:left; } .content { width:370px; height:300px; border:1px solid black; margin-left:230px; } .footer { width:600px; height:130px; border:1px solid black; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html> |
У блока с контентом .content я добавил отступ от левого края margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.
Чтобы увидеть границы наших div блоков я применил атрибут border и задал значение 1px, solid — сплошная линия и выбрал цвет черный black.
Также вы наверняка обратили внимание, что у селектора .sidebar я добавил атрибут float:left; Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:
Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!
smarticle.ru
Классы и ID CSS: Что использовать?
В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.
В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.
Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.
Как используется CSS-селектор ID
Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:
<div> <font> <font>Это заголовок нашей веб-страницы. </font> </font> </div>В файле CSS можно применить стили к этому элементу div:
#header { width: 100%; height: 80px; background: blue }Обратите внимание на использование # (хэша) перед именем идентификатора.
Как используется селектор CSS класса
Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:
<p> <font> <font>Это наш первый пункт.</font> </font> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p>В файле CSS можно применить стили к этим абзацам следующим образом:
.content { margin: 20px 0; line-height: 24px; font-size: 15px }Обратите внимание на использование точки перед именем класса.
В чем разница между CSS-классами и ID
Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.
Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.
Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:
<div> <a> <font> <font>Ссылка 1 </font> </font></a> <a> <font> <font>Ссылка 2 </font> </font> </a> <a> <font> <font>Ссылка 3 </font> </font> </a> <a> <font> <font>Ссылка 4</font> </font> </a> </div> <div> <p> <font> <font>Это наш первый пункт.</font> </font>< /p> <p> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p> </div>В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.
В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.
Назначим стили для этих элементов:
#container { width: 1080px; margin: 0 auto; background: #eee } #menu { height: 90px; background: #ddd } .link { color: #000; text-decoration: none } #content { padding: 20px } .text { font-size: 15px }Когда использовать в CSS класс, а когда ID
ID используется для отдельных элементов, которые присутствуют на странице только в одном месте. Например, заголовка, подвала или меню. Класс используется для одного или нескольких элементов, которые присутствуют на странице: параграфов, ссылок, кнопок, полей ввода. Также можно использовать класс для единичного элемента. Чтобы привыкнуть к этому различию, лучше завести привычку использовать классы для управления несколькими элементами одного типа.
Следует помнить, что HTML-элемент может иметь CSS класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:
<div> <font> <font>...</font> </font> </div> <div> <font> <font>...</font> </font></div>Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:
<p> <font> <font>Этот пункт не имеет границ.</font> </font> </p> <p> <font> <font>Этот пункт имеет границы.</font> </font> </p>Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:
.content { margin: 10px; font-size: 15px; color: blue } .bordered { border: 2px solid #222 }Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.
Перевод статьи «CSS Class vs ID Which One to Use» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Как перейти с div вёрстки на разметку HTML5? - html(5), css
Предлагаю небольшой обзор стандарта HTML5. Ну есть он, каковы отличия, что нового, чем лучше старого доброго html4?
По мере популяризации стандарта, многие задались вопросом, стоит ли переписывать код разметки действующего/создаваемого сайта под новый стандарт HTML5? Если да, то как?
Заведем здесь небольшой пример для того, чтобы было дальше нагляднее.
Итак, имеем примерно такой код документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="style.css" type="text/css"> <script src="script.js" type="text/javascript"></script> <title>Заголовок</title> </head> <body> <div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div> <p>Lorem ipsum</p> </div> <div> sidebar </div> <div> copyright </div> </body></html> Стандартный двух колоночный макет, с верхним меню в шапке сайта.Базовые теги стандарта html5:
<header> - элемент, который обозначает шапку сайта или какой-то секции. На странице может присутствовать сразу несколько элементов.
<footer> - элемент, обозначающий подвал страницы (нижней её части), также может являться нижней частью любой секции секции. На странице может присутствовать несколько таких элементов (например, подвал страницы с информацией о копирайте + элемент в каждой новости).
<nav> - элемент служит для обрамления любого меню сайта. Может располагаться (хотя и необязательно в блоке header).
<main> - элемент для отображения основного контента страницы сайта. Он НЕ должен содержать навигационные и вспомогательные блоки сайта, такие как меню, логотип, сайдбары и т.д.
<section> - используется для логического структурирования блоков информации на странице. Например, он может обрамлять списки новостей, статей, уроков и т.д.
<aside> - элемент, который используют для обозначения вспомогательных боковых колонок. Например, им обрамляются сайдбары.
<article> - элемент используется для логического выделения самостоятельной единицы информации. Например, внутрь тега может быть помещен, анонс статьи с заголовком, заметка, пост блога и.т.д.
Некоторые теги, которые могут использоваться по необходимости:
<audio>, <video> - теги для вставки аудио/видео материалов на сайт.
<time> - тег для вставки даты. Например, дата размещения статьи.
<canvas> - элемент используется для рисования двухмерных изображений с помощью скриптов (в частности Javascript). Графики на сайтах, диаграммы и т.д.
Элементы должны содержать открывающий/закрывающий теги. Вообще, это относится не только к элементам стандарта HTML5. Хотя современные браузеры и научились правильно ставить закрывающий тег, в случае отсутствия такового — правилом хорошего тона считается закрытие тегов (если речь идёт не об одиночных) самим разработчиком.
Теперь небольшая подготовительная часть, чтобы переход был минимально ощутим для старых браузеров:
Добавляем в секцию <head>:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->Для понимания неизвестных блочных элементов брузером, в файл со стилями добавляем:
footer, nav, header, section, aside { display: block;}Теперь посмотрим, что получится, если переписать код нашего шаблона под стандарт HTML5:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet"> <script src="script.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> footer, nav, header, section, aside { display: block; } </style> <title>Document</title> </head> <body> <header> <nav> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </nav> </header> <main> <p>Lorem ipsum</p> </main> <aside> sidebar </aside> <footer> copyright </footer> </body></html>Как видим различия?
- Доктайп сократился и стал лаконичным. Теперь нет необходимости мучительно выбирать подходящий.
- Пропали атрибуты type="…", MIME-типы у тегов внутри.
- Все блоки div были заменены на семантические элементы разметки. Причем если селекторы в файле стилей не были привязаны к тегам (например, не "div.header", а ".header"), то стили без правок применятся к соответствующим элементам.
Нужно понимать, что переход на HTML5 это больше, чем просто перевод div-верстки на теги из нового стандарта.
Это оптимизация сайта под поисковики, под всю ту широкую линейку всевозможных современных устройств, с которых могут просматриваться сайты. Новые возможности по вставке медиа материалов, дополнительные стандартные возможности при работе с формами (многие из которых раньше достигались только через подключение скриптов).
Это лишь краткий список новшеств. Надеюсь, данный экскурс поможет Вам разобраться.
Вопросы, уточнения — оставляйте в комментариях.
hellohtml.ru
Сайт визитка - размечаем основные блоки и элементы в хейдере
На итоговый результат можно посмотреть, перейдя по ссылке ниже.
Посмотреть DemoКак правило, все графические элементы, которые используются для оформления сайта, хранятся в отдельной папке с соответствующим названием. Не будем отступать от этого правила и мы. В папке synchronous/html создадим еще одну директорию и назовем ее images.
Откроем PSD (synchronous/PSD/home.psd). Нам нужно вырезать из макета логотип и сохранить его на прозрачном фоне.
Отключаем слой wraper.
Выделяем логотип (внимательно смотрим, что бы надпись под логотипом не попала в область выделения).
Копируем выделенный объект в буфер обмена. Создаем новый документ. Проверяем, что бы значение параметра Background Contents было Transparent (если требуется, выбираем из выпадающего списка нужное значение) и нажимаем кнопку OK.
Вставляем содержимое буфера обмена в созданный документ - изображение логотипа появится в рабочей области.
Сохраняем изображение в папке images проекта, с именем logo и с расширением png.
С необходимой графикой закончили - займемся html. Открываем index.html в Notepas++ (если он не открыт). Между тэгами <body> </body> напишем следующий код:
<body> <div> <header> </header> <div> </div> </div> <footer> </footer> </body>Мы разметили три основных части сайта - header, content и footer. Для хедера и подвала сайта были использованы специальные тэги, которые применяются в html 5 (header и footer). Всем блокам заданы классы (например,).
Сосредоточим свое внимание на блоке header. Его можно было бы разметить и с помощью div - результат был бы таким же, но мы будем придерживаться спецификации html 5. Внутри header разместим логотип и навигацию для сайта. Логотип, как правило, является ссылкой, ведущей на главную страницу. Это необязательное условие, но изобретать велосипед не будем. Внутри <header> </header> пишем следующее:
<header> <a href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a> </header>Если сейчас обновить страницу (или открыть в браузере index.html, если он еще не открыт), то мы увидим картинку с названием компании и слоган. Оба элемента являются ссылкой.
Итак, как и положено строчным элементам, картинка с фразой выстроились в один ряд друг за другом. Текст приобрел синий цвет и стал подчеркнутым - так отмечаются по умолчанию ссылки в браузере. Результат ожидаемый - двигаемся дальше.
Еще один элемент, который должен быть размещен в хейдере - навигационное меню. В подавляющем большинстве случаев меню размечаются с помощью ненумерованных (неупорядоченных) списков. Вот как будет выглядеть код:
<ul> <li><a href="#"></a>Главная</a></li> <li><a href="#"></a>О компании</a></li> <li><a href="#"></a>Новости</a></li> <li><a href="#"></a>Контакты</a></li> </ul>По спецификации html 5 все навигационные ссылки обрамляются парным тегом nav. Так и сделаем, только еще присвоим элементу nav класс top_nav. С учетом вышесказанного, весь код главной страницы сайта будет выглядеть следующим образом:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Главная</title> </head> <body> <div> <header> <a href="/"><img alt="логотип synchronous" src="/images/logo.png" />официальный сайт компании</a> <nav> <ul> <li><a href="#"></a>Главная</a></li> <li><a href="#"></a>О компании</a></li> <li><a href="#"></a>Новости</a></li> <li><a href="#"></a>Контакты</a></li> </ul> </nav> </header> <div> </div> </div> <footer> </footer> </body> </html>Посмотрим, что покажет нам браузер:
Ну, что же, хоть вид и далек от того, что нарисовано в макете, но, скажу по секрету - мы все выполнили правильно. Что бы придать элементам нужное положение и презентабельный внешний вид, им следует назначить стилевые правила. В следующей статье наведем немного "красоты" - натянем фон и разместим элементы хедера там, где они и должны быть.
Автор: Super User
siteis.ru
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.
Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.
Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д. По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.
Можно, например, типичную запись:
<div><h2><a href="http://www.examplesite.com/">Самый сайт</a></h2></div>
переписать по-новому так:
<header><h2><a href="http://www.examplesite.com/">Самый сайт</a></h2></header>
И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.
Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:
header, footer, nav, article {display: block;}
Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.
nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).
section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.
article — служит для разбивки страницы на отдельные статьи.
Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня h2 на одной странице несколько раз, что ранее было недопустимо. Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:
<section><article><section></section><section></section></article><article><section></section><section></section></article></section>
hgroup — тэг призван группировать заголовки страницы в одну логическую единицу. Например, главный заголовок всей страницы h2 и описание к ней, оформленное тэгом h4. На странице в дальнейшем еще несколько раз могут использоваться тэги h4 для других целей. Чтобы логически отделить описание страницы от других тэгов h4, мы его объединяем с главным тэгом h2 в группу, которая и обозначается тэгом hgroup:
<hgroup><h2>Самый сайт</h2><h4>Здесь описание Самого сайта</h4></hgroup>
UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.
main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.
Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main. В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!
Тэг main не является структурным тэгом и никак не влияет на разметку страницы. Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности. И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:
main {display:block;}
Пример использования тэга main:
<body><header></header><main>Основное, уникальное содержимое страницы сайта.</main><aside></aside><footer></footer></body>
Тэг main был задуман для всевозможных программ-скринридеров, чтобы люди с плохим зрением могли знать, что на странице сайта является основным содержимым.
Из уникальности тэга main следует, что использовать его на сайте достаточно сложно. Ну, сами представьте себе такой сайт, где на каждой странице нужно выделить уникальную часть. Представили? Лично я вижу лишь простенький сайт-визитку на 5 – 6 страниц, где содержимое каждой страницы уникально и не повторяется нигде больше на сайте.
А взять, к примеру, любой блог на WordPress. Как выделить уникальное содержимое, если на главной страницы присутствуют анонсы статей, в архиве тоже есть выдержки? Какая уж тут уникальность! Разве что на статичных страницах типа «О сайте» или «Контакты».
Так что не все, что появляется нового в HTML5 на самом деле полезно, и не стоит это сразу же применять необдуманно.
Продолжение следует…
HTML5 ВведениеHTML5 первые шагиHTML5 новые тэги header, footer, nav, aside, section, article, hgroup, mainHTML5 новые тэги time, figure, video, audio, canvas
02.02.2012
Автор: Игорь Квенторwww.websovet.com
Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:
www.websovet.com
Шапка страницы | htmlbook.ru
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header>.
header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
<header> <div> <img src="images/header-title.png" alt="Как поймать льва в пустыне"> </div> </header>И стиль для элемента <header> и слоя header-bg.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
- Использовать формат PNG-24 при сохранении прозрачности.
- Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }Выравнивание по центру делается через свойство text-align, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне"></a>Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
Пример 6.14. Шапка сайта
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как поймать льва в пустыне?</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* Градиент */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* Животные */ height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ } </style> </head> <body> <header> <div> <img src="images/header-title.png" alt="Как поймать льва в пустыне" > </div> </header> </body> </html>htmlbook.ru
{i['googleanalyticsobject']=r_0.jpg)
